<template>
	<div class="main-wrapper" ref="mainWrapper">
		
	
		<confirm v-model="show"
			:title="confirmObj.title"
			@on-cancel="show=false"
			@on-confirm="releaseOrderOnConfirm"
			@on-show="show=true"
			@on-hide="show=false">
			<group>
				<x-input text-align="left"
						 type="number"
						 v-model="releaseOrderIntegral"
						 :placeholder="confirmObj.placeholder">
				</x-input>
				<popup-picker :title="''" 
								:data="recieveExpressLocData" 
								v-model="receiveExpressLoc" 
								value-text-align="left"
								:placeholder="'请选择快递存放地点'">
				</popup-picker>
				<popup-picker :title="''" 
								:data="getExpressLocData" 
								v-model="getExpressLoc" 
								value-text-align="left"
								:placeholder="'收货点'">
				</popup-picker>
				
				
			</group>
		</confirm>
		<scroller lock-x scrollbar-y use-pullup 
				  @on-pullup-loading="pullUpLoad" 
				  ref="demo1" 
				  :height="scrollerH+'px'"
				  :pullup-config="pullupConfig">
			<div class="myexpress-list-wrapper">
				<XButton class="add-express-btn" 
						 @click.native="addExpress()" 
						 action-type="button"
						 type="primary">添加快递</XButton>
				<p class="myexpress-item" v-for="(item,i) in myExpressList" :key="item.expressNum">
					<form-preview :header-label="'快递名称'" :header-value="item.expressName" 
								  :body-items="[{'label':'快递单号','value':item.expressNum},
												{'label':'快递公司','value':item.expressCom},
												{'label':'快递状态','value':item.expressStatus?'已签收':'未签收'}]" 
								  :footer-buttons="[{'style': 'default','text': '查看详情',
								  					 'link':{'name':'search','params':{'kdno':item.expressNum}}},
								  					{ 'style': 'primary', 'text': '发布订单', 
													  'onButtonClick':showConfirm.bind(this,i) }]">
					</form-preview>
				</p>
			</div>
		</scroller>
		
	</div>
</template>
<script>
import checkLogin from '../myUtils/checkLogin';
var jjsk = require('../assets/jjsk.png');
import { mapGetters } from 'vuex';
import { XButton, FormPreview, Scroller ,Confirm,XInput, Group,PopupPicker } from 'vux'
import myExpressList from '../data/myexpressList.js';
import getElD from '../data/getExpressLoc.js';
export default {
	data() {
		return {
			sk: jjsk,
			myExpressList: myExpressList,
			show:false,
			scrollerH:200,
			pullupConfig:{
				content: '下拉加载新数据...',
				pullUpHeight: 60,
				height: 100,
				autoRefresh: false,
				downContent: '释放加载数据',
				upContent: '下拉加载新数据',
				loadingContent: '加载中...',
				clsPrefix: 'xs-plugin-pullup-'
			},
			releaseOrderIdx:0,
			releaseOrderIntegral:0,
			confirmObj:{
				title:'',
				groupTitle:'你打算支付多少积分',
				placeholder:"请输入积分"
			},
			showPopupPicker:false,
			getExpressLocData:getElD.loc,
			recieveExpressLocData:getElD.getELoc,
			getExpressLoc:[],
			receiveExpressLoc:[],
		}
	},
	methods: {
		// 上拉加载的事件
		pullUpLoad() {
			var self = this;
			setTimeout(() => {
				self.myExpressList = self.myExpressList.concat(self.myExpressList);
				setTimeout(() => {
					this.$refs.demo1.donePullup()
				}, 100)
			}, 1000)
		},
		addExpress(){
			console.log(2333)
			this.$router.push({name:'addexpress'});
		},
		releaseOrderOnConfirm(){
			this.show = false;
			this.$vux.toast.show({
				type:'text',
				text: '发布成功！',
				position:'middle',
			});
			console.log(this.releaseOrderIntegral);

		},
		showConfirm(i){
			console.log(i);
			this.releaseOrderIdx = i;
			this.confirmObj.title = '发布'+this.myExpressList[i].expressName;
			this.show = true;
		},
		setExpressLocData(v){
			this.getExpressLoc.push(v[0]) ;
		}
		
	},
	mounted(){
		var refs = this.$refs;
		this.scrollerH = refs.mainWrapper.clientHeight;
		console.log(this.getExpressLocData)
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	components: {
		XButton, 
		FormPreview,
		Scroller,
		Confirm,
		XInput, 
		Group,
		PopupPicker 
	},
	created() {
		checkLogin(this);
	},

}
</script>
<style>
.myexpress-item {
	margin-bottom: .3rem;
}

.add-express-btn {
	margin: .3rem 0;
}

.weui-form-preview__btn_default,
.weui-form-preview__btn_primary {
	height: 1.3rem;
	line-height: 1.3rem;
	vertical-align: middle;
}
.vux-popup-dialog, 
.vux-popup{
    z-index:5100!important;
}

/**重写pop-picker */
/**
.scroller-indicator,
.scroller-item,
.scroller-component{
	height: 4rem!important;
}
.scroller-item{
	font-size:.8rem!important;
}

*/
.vux-popup-picker-header,
.vux-popup-picker-cancel,
.vux-popup-picker-header-menu-right{
	height: 1rem!important;
	line-height: 1rem!important;
	vertical-align: middle;
}

</style>
